import { Component } from "react";
import Taro from "@tarojs/taro";
import { View, Text } from "@tarojs/components";
import { observer } from "mobx-react";
import i18n from "i18n-js";
import { GButton } from "@/components/GButton";
import Alert from "@/components/Alert";
import { UserState_Store_Key } from "@/models/userState";
import { DynamicColors, GStyleSheet } from "@/utils/DarkMode";
import Avatar from '@/components/Avatar';
import { norInject, INorInjectProps } from "@/models";
import PageContainer from "@/components/PageContainer";
import Toast from "@/utils/Toast";
import logout from "@/utils/logout";
import { destructionAccount } from '@/services/account';

interface IProps extends INorInjectProps {

}

const dstyle = GStyleSheet.create({
  container: {
    display: 'flex',
    height: '100%',
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center'
  },
  content: {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    position: 'relative',
    top: -70
  },
  userInfo: {
    justifyContent: 'flex-start',
  },
  avatar: {
    width: 100,
    height: 100,
  },
  tip: {
    color: DynamicColors.subTitleTextColor,
  },
  nickname: {
    color: DynamicColors.normalTextColor,
  }
});

@norInject(UserState_Store_Key)
@observer
class DestructionAccount extends Component<IProps> {

  state = {
    logoutShow: false,
  }

  showLogoutAlert = () => {
    this.setState({ logoutShow: true })
  };

  hideLogoutAlert = () => {
    this.setState({ logoutShow: false })
  };

  logoutClick = async () => {
    this.hideLogoutAlert();
    Toast.loading('')
    const res = await destructionAccount({ type: 3 });
    Toast.hideLoading()
    if (res.success) {
      await logout(false);
      Toast.success(i18n.t('DESTRUCTION_ACCOUNT_SUCCESS'))
      Taro.navigateBack({ delta: 5 });
    } else {
      const { message } = res;
      Toast.success(message ?? i18n.t('DESTRUCTION_ACCOUNT_FAIL'))
    }
  };

  render() {

    const styles = dstyle.style;
    const { userState } = this.props;
    const { logoutShow } = this.state;
    return (
      <PageContainer title={i18n.t('CANCELLATION_OF_ACCONUT')} >
        <View style={styles.container}>
          <View style={styles.content}>
            <Avatar style={styles.avatar} src={userState?.userInfo.avatar} />
            <View style={{ marginTop: 20 }}><Text style={styles.nickname}>{userState?.userInfo.nickname}</Text></View>
            <View style={{ width: '80%', marginTop: 50, }}>
              <Text style={styles.tip}>{i18n.t('DESTRUCTION_ACCOUNT_EXPLAIN')}</Text>
            </View>
            <View style={{ marginTop: 30, marginBottom: 30, height: 80, width: '100%' }}>
              <GButton
                style={{ borderColor: '#333' }}
                textStyle={{ color: '#333' }}
                primary
                text={i18n.t("CANCELLATION_OF_ACCONUT")}
                onPress={this.showLogoutAlert}
              />
            </View>
          </View>
        </View>
        <Alert
          title={i18n.t("DESTRUCTION_ACCOUNT_TIPS")}
          visible={logoutShow}
          onCancel={this.hideLogoutAlert}
          onConfirm={this.logoutClick}
        />
      </PageContainer>
    );
  }
}

export default DestructionAccount;
